{extend name="common/base"}
{block name="content"}
<table id="approval" lay-filter="approval"></table>
<script type="text/html" id="operateBar">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    {{# if(d.status == 0){ }}
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    {{# } }}
    {{# if(d.status == 3 || d.status == 0 || d.status == 4){ }}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{# } }}
    {{# if(d.status == 1 && (d.user_id == '{$Think.session.admin.id}' || '{$Think.session.admin.level}' == 1 )){ }}
        <a class="layui-btn layui-btn-xs" lay-event="cancel">撤销</a>
    {{# } }}
    <!-- 这里同样支持 laytpl 语法，如： -->
    {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
    {{#  } }}
</script>
<script type="text/html" id="startBar">
  {{# if(d.status == 0){ }}
    {{#  if(d.start == 1){ }}
    <a lay-event="start"><input type="checkbox" name="start" value="1" checked="checked" lay-skin="switch" lay-text="启用|锁定" id="start{{d.id}}"  lay-filter="start"></a>
    {{# }else{ }}
    <a lay-event="start"><input type="checkbox" name="start" value="2" lay-skin="switch" lay-text="启用|锁定" id="start{{d.id}}" lay-filter="start"></a>
    {{# } }}
  {{# } }}
</script>
<script type="text/html" id="statusTpl">
    {{#
        var approvalStatus = {
            0: "待审",
            1: "进行",
            2: "通过",
            3: "驳回",
            4: "已撤销"
        };
    }}
    {{ approvalStatus[d.status] }}
</script>
{/block}

{block name="js"}
{__block__}
<script>
layui.use(['form', 'table'], function () {
    var $ = layui.jquery;
    var table = layui.table;
    var form = layui.form;
    table.render({
        elem: '#approval'
        ,height: 'full-220'
        ,data: {$approvals}
        ,page: true //开启分页
        ,cols: [[ //表头
            {checkbox: true},
            {field: 'id', title: 'ID',width: 100, sort: true}
            ,{field: 'name', title: '审批名',sort: true}
            ,{field: 'contract', title: '关联合同', templet: '<div>{{d.contract.name}}</div>', sort: true}
            ,{filed: 'status', title: '状态', width: 80, templet: '#statusTpl', sort: true}
            ,{title: '启用', width:150, align:'center', toolbar: '#startBar'}
            ,{title: '操作',fixed: 'right', width:150, align:'left', toolbar: '#operateBar'}
        ]]
    });

    table.on('tool(approval)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的DOM对象
        // console.log(data);
        // 删除
        if (layEvent === 'del') {
            layer.confirm('确定要删除吗', {icon: 3, title:'提示'}, function(index){
                var delLoadingIndex = layer.load(1);
                $.ajax({
                    type: 'DELETE',
                    url: '/approval/del/' + data.id,
                    success: function (result) {
                        layer.close(delLoadingIndex);
                        if (result === 1) {
                            obj.del();
                            layer.msg('操作成功');
                            console.log(result);
                        }else if (result === 'hasStarted') {
                            layer.open({title: '警告', content: '当前审批已开启，请先关闭，再进行该操作！', icon: 2})
                        } else {
                            layer.msg('操作失败');
                            console.log(result);
                        }
                    },
                    error: function (error) {
                        layer.close(delLoadingIndex);
                        layer.msg('操作失败');
                        console.log(error)
                    }
                });

                layer.close(index);
            });
        }
        // 编辑
        if (layEvent === 'edit') {
            location.href = '/approval/edit/' + data.id;
        }
        // cancel
        if (layEvent === 'cancel') {
            layer.confirm('确定要撤销吗', {icon: 3, title:'提示'}, function(index){
                var cancelLoadingIndex = layer.load(1);
                $.ajax({
                    type: 'DELETE',
                    url: '/approval/cancel/' + data.id,
                    success: function (result) {
                        layer.close(cancelLoadingIndex);
                        if (result === 1) {
                            layer.msg('操作成功', function () {
                                location.reload();
                            });
                            console.log(result);
                        }else if (result === 'hasStarted') {
                            layer.open({title: '警告', content: '当前审批已开启，请先关闭，再进行该操作！', icon: 2})
                        } else {
                            layer.msg('操作失败');
                            console.log(result);
                        }
                    },
                    error: function (error) {
                        layer.close(cancelLoadingIndex);
                        layer.msg('操作失败');
                        console.log(error)
                    }
                });

                layer.close(index);
            });
        }
        // 查看详情
        if (layEvent === 'detail') {
            var index = layer.open({
                type: 2,
                title: '<span class="icon icon-flow"></span>  审批详情',
                area: ['500px', '600px'],
                content: '/approval/' + data.id,
                btnAlign: 'c',
            });
            layer.full(index);
        }

        // 启用状态更改
        if (layEvent === 'start'){
            tableSwitch($, obj, '/approval/start/', 'start');
        }
    })
    // 监听开关
    table.on('switch(start)', function(data){
        data.start = 5;
        console.log(data)
        console.log($(data.elem).val())
        if (data.elem.checked) {
            $(data.elem).val(1);
        } else {
            $(data.elem).val(2);
        }
        // console.log($(data.elem).val());
    });


})


</script>
{/block}